<template>
  <div>
    <svg id="chart">

    </svg>
  </div>
</template>

<script>
import * as d3 from "d3";
export default {
  name: "s2_circle",
  metaInfo: {
    title: "Circles",
  },
  data: function() {
    return {
    }
  },
  mounted() {
    let svg = d3.select("#chart")

    let circle = svg.selectAll("circle")
        .data([32, 57, 112, 293], d => d);

    let circleEnter = circle.enter().append("circle");

    circleEnter.attr("cy", 60);
    circleEnter.attr("cx", (d, i) => i * 100 + 30);
    circleEnter.attr("r", d => Math.sqrt(d));

    svg.selectAll("circle").data([57, 112], d => d).exit().remove();

  }
}
</script>

<style scoped>

</style>
